<template>
	<view class="bgcolor" style="background-color: #fff;">
		<header-top :messageInfo="{typeFlag:true,message:'修改密码'}">
		</header-top>
		
		<view class="change-phone">
			<input class="form-input" placeholder="请输入手机号" v-model="oldPhone" disabled="" border="bottom" clearable
				placeholderStyle='color: #999999;fontSize:30rpx'>
			</input>
			<view class="flexbetween form-input">
				<input placeholder="请输入验证码" v-model="yzm" border="bottom" clearable
					placeholderStyle='color: #999999;fontSize:30rpx'></input>
				<text style="color: #3476fe;font-size: 36rpx;font-weight: 800;" @click="sendcode">{{codetext}}</text>
			</view>
			<input class="form-input" placeholder="请输入新密码" border="bottom" v-model="newPass" clearable
				placeholderStyle='color: #999999;fontSize:30rpx'>
			</input>
			<input class="form-input" placeholder="请再次输入新密码" border="bottom" clearable v-model="repNewPass"
				placeholderStyle='color: #999999;fontSize:30rpx' style='margin-bottom: 60rpx;'></input>
			<view class="" style="padding: 0 71rpx;">
				<view class="buttonStyle flexcenter" @click='submit'>
					确认修改
				</view>
			</view>
		</view>
		<view class="bottom flexcolumn">
			<view class="gongsimsg flexcenter">
				<view class="gslogo">
					<image :src="Config.gs_logo" mode=""></image>
				</view>
				<text>{{Config.gs_name}}</text>
			</view>
			<view class="contract" @click="phone(Config.gs_tel)">{{Config.gs_tel}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				oldPhone: '',
				yzm: '',
				newPass: '',
				repNewPass: '',
				codetext:"获取验证码",
				Config: {},
			}
		},
		onLoad(){
			this.init()
			this.getConfigInfo()
		},
		methods: {
			getConfigInfo() {
				httpRequest.request('/employeesapi/index/getConfigInfo', 'GET', {}).then(resp => {
					this.Config = resp.data
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			init(){
				httpRequest.request('/employeesapi/user/index', 'POST', {
				}).then(res => {
					this.oldPhone = res.data.mobile
				})
			},
			// 发送验证码
			sendcode() {
				let _this = this
				let mobile = _this.oldPhone;
				if (!mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: mobile,
					event: "ygchangepwd"
				}).then(resp => {
					if (resp.code == 1) {
						var i = 60;
						var timer = setInterval(function() {
							_this.codetext = i + "秒";
							if (i < 1) {
								clearInterval(timer);
								_this.codetext = "获取验证码";
							} else {
								i--;
							}
						}, 1000)
			
					} else if (resp.code == 0) {
						httpRequest.toast(resp.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				})
			},
			// 确认修改
			submit(){
				if (this.oldPhone == '') {
					httpRequest.toast('请输入手机号');
					return false;
				}
				if (!this.oldPhone.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				if (this.yzm == '') {
					httpRequest.toast('请输入验证码');
					return false;
				}
				if (this.newPass == '') {
					httpRequest.toast('请输入密码');
					return false;
				}
				if (this.repNewPass == '') {
					httpRequest.toast('请确认密码');
					return false;
				}
				if (this.newPass != this.repNewPass) {
					httpRequest.toast('两次密码输入不一致');
					return false;
				}
				httpRequest.request('/employeesapi/user/changepwd', 'POST', {
					captcha:this.yzm,
					mobile:this.oldPhone,
					newpassword:this.repNewPass
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(function() {
							uni.reLaunch({
								url:"/pages/thelogin/thelogin"
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.change-phone {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		padding-top: 100rpx;
		input {
			margin: 20rpx 0;
		}
	}

	.form-input {
		padding: 20rpx 30rpx 20rpx 50rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}  

	// 底部
	.bottom {
		position: fixed;
		bottom: 30rpx;
		width: 100%;

	}

	.gongsimsg {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.gslogo {
		width: 39rpx;
		height: 32rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contract {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>
